import { BaseTableModal } from "./base";
import BatchSuffixInput from "@/views/components/BatchSuffixInput";
import { Button, Input, Select } from "antd";

import request from "@/utils/request";
import { stringify } from "qs";
import CommonZjfImg from "@/views/components/CommonZjfImg";
import CommonStoreSearchInput from "@/views/components/CommonStoreSearchInput/index";
import { useState } from "react";
import { renderCityOptions } from '@/utils/utils.jsx';

const cityOptions = renderCityOptions();
// 组合商品列表
export async function getSupplierSpuList(params) {
	return request(`/blade-goods/zjfgoodscommon/list/fuzzyQueryGoodsCommonPage`, {
		method: "POST",
		loading: true,
		data: params
	});
}
export const SupplierSpuModal = ({ type = "simple", title = "供应商商品搜索", width = "945px", children, onOk }) => {
	const tableRequest = getSupplierSpuList;
	const [columns, setColumns] = useState([
		{
			name: "供应商名称",
			code: "storeName",
			width: 100,
			search: {
				order: 1,
				code: "storeIdCopy1",
				content: () => <CommonStoreSearchInput type="storeName" placeholder="请输入供应商名称" />
			}
		},
		{
			name: "档口号",
			code: "shopCode",
			width: 200,
			search: {
				order: 1,
				code: "storeIdCopy2",
				content: () => <CommonStoreSearchInput type="shopCode" placeholder="请输入档口号" />
			}
		},
		{
			name: "商品信息",
			code: "spuInfo",
			width: 400,
			render: (_, record, i) => {
				return (
					<div className="flex">
						<CommonZjfImg img={record.goodsImage} storeId={record.storeId} />

						<div className="flex-column">
							<span>款式编码:{record.goodsCommonid}</span>
							<span>{record.goodsName}</span>
						</div>
					</div>
				);
			},
			search: {
				order: 0,
				code: "cityName",
				content: () => (
					<Select placeholder="城市" options={cityOptions}></Select>
				)
			}
		},
		// {
		// 	name: "采购价",
		// 	code: "goodsPrice",
		// 	render: v => <span className="red">{v && `￥${Number(v).toFixed(2)}`}</span>
		// },
		{
			hidden: true,
			name: "商品名称",
			code: "spuName",
			search: {
				order: 2,
				code: "goodsNameList",
				content: () => (
					<BatchSuffixInput
						autoMultiLine
						allowClear
						clearable
						placeholder="商品名称，多个逗号隔开"
						message="多个商品名称， 每行输入1个内容，最多4个"
					/>
				)
			}
		},
		{
			hidden: true,
			name: "款式编码",
			code: "spuCode",
			search: {
				order: 3,
				code: "goodsCommonIdList",
				content: () => <BatchSuffixInput autoMultiLine allowClear clearable placeholder="款式编码，多个逗号隔开" />
			}
		}
	]);
	const beforeQuerySearch = ({ API_DATA }) => {
		const key = "storeId";
		const value = API_DATA["storeIdCopy1"] || API_DATA["storeIdCopy2"];
		delete API_DATA["storeIdCopy1"];
		delete API_DATA["storeIdCopy2"];
		API_DATA[key] = value;

		if (typeof API_DATA["goodsCommonIdList"] === "string") {
			API_DATA["goodsCommonIdList"] = API_DATA["goodsCommonIdList"].split(",");
		}

		if (typeof API_DATA["goodsNameList"] === "string") {
			API_DATA["goodsNameList"] = API_DATA["goodsNameList"].split(",");
		}

		if (typeof API_DATA["goodsIdList"] === "string") {
			API_DATA["goodsIdList"] = API_DATA["goodsIdList"].split(",");
		}
		return { ...API_DATA, size: API_DATA.pageSize, current: API_DATA.pageNum };
	};
	const SupplierSpuProps = {
		type,
		title,
		width,
		onOk,
		////
		tableKey: "supplierSpuModal2024-3-27 20:45:51",
		rowKey: "goodsCommonid",
		// ///
		columns,
		tableRequest,
		autoFetch: false,
		hasPagination: true,
		hasQuickSearch: false,
		beforeQuerySearch,
		resetSourceData: false,
		hasColsSetting: false,
		hasToggleSearchForm: false,
		columnResize: true,
		hasQueryLocation: false,
		searchSpan: 3
	};

	return <BaseTableModal {...SupplierSpuProps}>{children}</BaseTableModal>;
};
